<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        main {
            display: flex;
            background-color: purple;
            width: 60%;
            height: 500px;
            margin: 0 auto;
            flex-direction: column;
        }
        
        div {
            margin: 4px;
        }
        
        .div1 {
            display: flex;
            background-color: red;
            justify-content: flex-end;
            height: 30px;
        }
        
        .div111 {
            flex: 1;
        }
        
        .div2 {
            display: flex;
            height: 80px;
            background-color: brown;
            justify-content: center;
            align-items: center;
        }
        
        .div3 {
            display: flex;
            background-color: cadetblue;
            height: 60px;
            justify-content: space-around;
        }
        
        .div3 div {
            flex: 1;
            background-color: cornsilk;
        }
        
        .div4 {
            display: flex;
            background-color: chartreuse;
            height: 90px;
            justify-content: space-between;
        }
        
        .div4 div {
            flex: 1;
            background-color: cornflowerblue;
        }
        
        .div411 {
            display: flex;
        }
        
        .div412 {
            display: flex;
            flex-direction: column;
        }
        
        .div412 div {
            background-color: burlywood;
        }
        
        .div413 {
            display: flex;
            flex-direction: column;
        }
        
        .div413 div {
            background-color: coral;
        }
        
        .div5 {
            display: flex;
            flex-direction: column;
            height: 140px;
            background-color: white;
        }
        
        .div5 div {
            display: flex;
            justify-content: space-around;
            background-color: darkcyan;
            flex: 1;
        }
    </style>
</head>

<body>
    <main>
        <div class="div1">
            <div class="div111" style="background-color: green;">搜索框</div>
            <div style="background-color: blue;">登录</div>
        </div>
        <div class="div2">高速享受慢生活</div>
        <div class="div3">
            <div>景点玩乐</div>
            <div>周边游</div>
            <div>美食林</div>
            <div>一日游</div>
            <div>当地攻略</div>
        </div>
        <div class="div4">
            <div class="div411">酒店</div>
            <div class="div412">
                <div class="div4121">海外酒店</div>
                <div class="div4122">特价酒店</div>
            </div>
            <div class="div413">
                <div>团购</div>
                <div>民宿.客栈</div>
            </div>
        </div>
        <div class="div4">
            <div class="div411">机票</div>
            <div class="div412">
                <div class="div4121">火车票</div>
                <div class="div4122">特价机票</div>
            </div>
            <div class="div413">
                <div>汽车票.船票</div>
                <div>专车.出租车</div>
            </div>
        </div>
        <div class="div4">
            <div class="div411">旅游</div>
            <div class="div412">
                <div class="div4121">门票</div>
                <div class="div4122">目的地攻略</div>
            </div>
            <div class="div413">
                <div>游轮旅行</div>
                <div>定制旅行</div>
            </div>
        </div>
        <div class="div5">
            <div class="div51">
                <div>WIFI电话卡</div>
                <div>保险签证</div>
                <div>外币兑换</div>
                <div>购物</div>
                <div>当地向导</div>
            </div>
            <div class="div52">
                <div>自由行</div>
                <div>境外玩乐</div>
                <div>礼品卡</div>
                <div>信用卡</div>
                <div>更多</div>
            </div>
        </div>
    </main>
</body>

</html>